<template>
	<div class="container flex-column-center">
		<div class="video-box">
			<yingbing-video autoplay class="video" :src="videoUrl"></yingbing-video>
<!-- 			<video class="video"
			               :autoplay="true"
			               :src="videoUrl"> -->
			<!--          <u-loading mode="circle" v-show="video.loading" class="loading p-a"></u-loading>-->
			<!--          <i v-if="!flag" class="p-a un-screen iconfont icon-full-screen-one" @click="fullscreenClick(video.id)"></i>-->
			<!--          <i v-else class="p-a full-screen iconfont icon-click-to-fold" @click="fullscreenClick(video.id)"></i>-->
			        </video>
		</div>
		<div class="control-out">
			<div class="control-inner"></div>
			<image class="control-btn top" @click="controlClick('TILT_UP')" src="../../static/imgs/top.png" alt="">
			<image class="control-btn down"  @click="controlClick('TILT_DOWN')" src="../../static/imgs/down.png" alt="">
			<image class="control-btn left" @click="controlClick('PAN_LEFT')" src="../../static/imgs/left_play.png" alt="">
			<image class="control-btn right" @click="controlClick('PAN_RIGHT')" src="../../static/imgs/right_play.png" alt="">
		</div>
		<div class="btn-box flex-arroud">
			<image class="btn" @click="controlClick('ZOOM_IN')" src="../../static/imgs/zoomout.png" alt="">
			<!-- <image class="btn" @click="controlClick('Z00M_OUT')" src="../../static/imgs/refresh.png" alt=""> -->
			<image class="btn" @click="controlClick('ZOOM_OUT')" src="../../static/imgs/zoomin.png" alt="">
		</div>
	</div>
</template>

<script>
	import{request} from '@/utils/http.js'
	
	export default{
		name:'monitor',
		data(){
			return{
				id:'',
				videoUrl:''
			}
		},
		methods:{
			controlClick(val){
				const parmas = {
					hiaKangControlOthErenum:val,
					id:this.id
				}
				uni.showLoading({
					title: '加载中'
				});
				request('/blade-platform/home/playControl','get',parmas).then(res=>{
					console.log(res)
						uni.hideLoading();
				}).catch(err=>{
						uni.hideLoading();
					uni.showToast({
						icon:'none',
						title: err,
						duration: 2000
					});
					
				})
			},
			getStream(){
				uni.showLoading({
					title: '加载中'
				});
				request('/blade-platform/home/getTranscode','get',{id:this.id}).then(res=>{
					console.log(res)
					this.videoUrl = res
					uni.hideLoading();
				}).catch(err=>{
					uni.hideLoading();
					uni.showToast({
						icon:'none',
						title: err,
						duration: 2000
					});
				})
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getStream()
		}
	}
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100vh;
		background: url('../../static/imgs/monitor_bg.png')no-repeat;
		background-size: 100% 100%;
		padding: 50upx;
		box-sizing: border-box;
		.video-box{
			width: 700upx;
			height: 451upx;
			background: #FFFFFF;
			border-radius: 36upx;
			overflow: hidden;
			.video{
				width: 100%;
				height: 100%;
			}
		}
		.control-out{
			width: 408upx;
			height: 408upx;
			border-radius: 50%;
			background-color: #fff;
			position: relative;
			margin-top: 73upx;
			.control-inner{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 200upx;
				height: 200upx;
				border-radius: 50%;
				background-color: #78AAFF;
			}
			.control-btn{
				position: absolute;
				
				&.top{
					left: 50%;
					transform: translateX(-50%);
					top: 30upx;
					width: 31upx;
					height: 22upx;
				}
				&.left{
					top: 50%;
					left: 30upx;
					width: 22upx;
					height: 31upx;
					transform: translateY(-50%);
				}
				&.right{
					top: 50%;
					right: 30upx;
					width: 22upx;
					height: 31upx;
					transform: translateY(-50%);
				}
				&.down{
					left: 50%;
					transform: translateX(-50%);
					bottom: 30upx;
					width: 31upx;
					height: 22upx;
				}
			}
		}
		.btn-box{
			width: 90%;
			margin-top: 120upx;
			.btn{
				width: 128upx;
				height: 128upx;
			}
		}
	}
</style>